<template>
  <d2-container>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <div class="d2-breadcrumb">
        <el-breadcrumb-item>报备详情</el-breadcrumb-item>
      </div>
    </el-breadcrumb>
    <el-card style="margin: 20px 0" class="top-card">
      <div class="card-title-box">
        <h2>报备单号：{{ query.housingOrderId }}</h2>
        <div class="status">
          <div
            class="point"
            :style="`background-color:${['green', 'gray', 'yellow'][1]}`"
          ></div>
          {{
            ["", "新建报备", "审核通过", "等待看房", "看房结束", "审核驳回"][
              query.step
            ]
          }}
        </div>
      </div>
      <el-row :gutter="20" class="row">
        <el-col :span="8">
          <div class="label">带看经纪人&联系方式：</div>
          <div class="value">{{ query.name }}/{{ query.phone }}</div>
        </el-col>
        <el-col :span="8">
          <div class="label">创建时间：</div>
          <div class="value">
            {{ $moment(query.create_time).format("YYYY-MM-DD hh:mm:ss") }}
          </div>
        </el-col>
        <el-col :span="8">
          <div class="label">园区名称：</div>
          <div class="value">{{ query.gardenName }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="row">
        <el-col :span="8">
          <div class="label">企业名称：</div>
          <div class="value">{{ query.enterpriseName }}</div>
        </el-col>
        <el-col :span="8">
          <div class="label">看房时间：</div>
          <div class="value">
            {{ $moment(query.time).format("YYYY-MM-DD hh:mm:ss") }}
          </div>
        </el-col>
        <el-col :span="8">
          <div class="label">房源名称：</div>
          <div class="value">{{ query.housingName }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="row">
        <el-col :span="8">
          <div class="label">企业联系人&联系方式：</div>
          <div class="value">
            {{ query.customerName }}/{{ query.customerMobile }}
          </div>
        </el-col>
        <el-col :span="8">
          <div class="label">备注：：</div>
          <div class="value">{{ query.remark }}</div>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin: 20px 0; padding-bottom: 20px">
      <div slot="header" class="clearfix">
        <h3>流程进度</h3>
      </div>
      <br />
      <el-steps :active="query.step" align-center>
        <!-- <el-step
          :title="item.step"
          :description="`${item.name} ${$moment(item.createTime).format('YYYY-MM-DD hh:mm:ss')}`"
          v-for="(item,index) in query.logList"
          :key="index"
        ></el-step> -->
        <template v-if="query.step == 5">
          <el-step title="新建报备" v-if="query.logList.length <= 0"></el-step>
          <el-step
            v-else
            title="新建报备"
            :description="`${query.logList[0].name} ${$moment(
              query.logList[0].createTime
            ).format('YYYY-MM-DD hh:mm:ss')}`"
          ></el-step>

          <el-step
            title="审核驳回"
            v-if="query.step == 5"
            :description="`${query.logList[1].name} ${$moment(
              query.logList[1].createTime
            ).format('YYYY-MM-DD hh:mm:ss')}`"
          ></el-step>
        </template>
        <template v-else>
          <el-step title="新建报备" v-if="query.logList.length <= 0"></el-step>
          <el-step
            v-else
            title="新建报备"
            :description="`${query.logList[0].name} ${$moment(
              query.logList[0].createTime
            ).format('YYYY-MM-DD hh:mm:ss')}`"
          ></el-step>
          <el-step title="审核通过" v-if="query.logList.length <= 1"></el-step>
          <el-step
            v-else
            title="审核通过"
            :description="`${query.logList[1].name} ${$moment(
              query.logList[1].createTime
            ).format('YYYY-MM-DD hh:mm:ss')}`"
          ></el-step>
          <el-step title="等待看房" v-if="query.logList.length <= 2"></el-step>
          <el-step
            v-else
            title="等待看房"
            :description="`${query.logList[2].name} ${$moment(
              query.logList[2].createTime
            ).format('YYYY-MM-DD hh:mm:ss')}`"
          ></el-step>
          <el-step title="看房结束" v-if="query.logList.length <= 3"></el-step>
          <el-step
            title="看房结束"
            v-else
            :description="`${query.logList[3].name} ${$moment(
              query.logList[3].createTime
            ).format('YYYY-MM-DD hh:mm:ss')}`"
          ></el-step>
        </template>
      </el-steps>
    </el-card>
    <el-card style="margin: 20px 0; padding-bottom: 20px">
      <div slot="header" class="clearfix">
        <h3>图片凭证</h3>
      </div>
      <br />
      <el-row :gutter="20">
        <h3>带看经纪人</h3>
        <template v-if="query.agentImageList&&query.agentImageList.length>0">
        <el-col :span="8" v-for="(item,index) in query.agentImageList" :key="index">
          <el-image
            style="width: 200px"
            :src="item.image"
            :preview-src-list="[item.image]"
          >
          </el-image>
        </el-col>
        </template>
        <template v-else >
          <el-col :span="8">
          <div style="color:#C0C4CC">暂无数据</div>
          </el-col>
        </template>
      </el-row>
      <br />
      <!-- <h3>房源经纪人</h3>
      <el-row :gutter="20">
        <template v-if="query.masterImageList&&query.masterImageList.length>0">
        <el-col :span="8" v-for="(item,index) in query.masterImageList" :key="index">
          <el-image
            style="width: 200px"
            :src="item.image"
            :preview-src-list="[item.image]"
          >
          </el-image>
        </el-col>
        </template>
        <template v-else >
          <el-col :span="8">
          <div style="color:#C0C4CC">暂无数据</div>
          </el-col>
        </template>
      </el-row> -->

      <div class="flex-center" style="margin-top: 30px">
        <el-button type="primary" @click="$router.go(-1)">返回</el-button>
      </div>
    </el-card>
  </d2-container>
</template>
<script>
export default {
  data() {
    return {
      id: this.$route.params.id,
      query: { logList: [] },
      rules: {},
    };
  },
  methods: {
    getInfo() {
      this.$axios
        .post("/wxLookHousingOrder/getInfo", { id: this.id })
        .then((result) => {
          if (result) {
            this.query = {
              ...result.data,
            };
          } else {
            this.$message.error(result.data.msg);
          }
        });
    },
  },
  mounted() {
    this.getInfo();
  },
};
</script>
<style scoped lang="scss">
.top-card {
  .card-title-box {
    display: flex;
    width: 100%;
    align-items: center;
    .status {
      margin-left: 30px;
      display: flex;
      align-items: center;
    }
    .point {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: yellow;
      margin-right: 10px;
    }
  }
  .row {
    margin: 20px 0;
    .el-col {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>